Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
emotion-theming
Advanced tools
A CSS-in-JS theming solution for React
emotion-theming
is a theming library inspired by styled-components
# add --save if using npm@4 or lower
npm i emotion-theming
# or
yarn add emotion-theming
Theming is accomplished by placing the ThemeProvider
component, at the top of the React component tree and wrapping descendants with the withTheme
higher-order component. This HOC gets the current theme and injects it as a "prop" into your own component.
The theme prop is automatically injected into components created with styled
. The theme can also be accessed via passing a function to the css prop.
// Page.js
import * as React from 'react'
/** @jsx jsx */
import { jsx } from '@emotion/core'
import styled from '@emotion/styled'
const Container = styled.div({
background: 'whitesmoke',
height: '100vh'
})
const Headline = styled.h1`
color: ${props => props.theme.color};
font-family: sans-serif;
`
export default class Page extends React.Component {
render() {
return (
<Container>
<Headline>I'm red!</Headline>
<p css={theme => ({ color: theme.color })}>I'm also red!</p>
</Container>
)
}
}
// App.js
import React from 'react'
import ReactDOM from 'react-dom'
import { ThemeProvider } from 'emotion-theming'
import Page from './Page.js'
const theme = {
color: 'red'
}
class App extends React.Component {
render() {
return (
<ThemeProvider theme={theme}>
<Page />
</ThemeProvider>
)
}
}
A React component that passes the theme object down the component tree via context. Additional ThemeProvider
components can be added deeper in the tree to override the original theme. The theme object will be merged into its ancestor as if by Object.assign
. If a function is passed instead of an object it will be called with the ancestor theme and the result will be the new theme.
Accepts:
children
: React.Nodetheme
: Object|Object => Object - An object or function that provides an object.import React from 'react'
import styled from '@emotion/styled'
import { ThemeProvider, withTheme } from 'emotion-theming'
// object-style theme
const theme = {
backgroundColor: 'green',
color: 'red'
}
// function-style theme; note that if multiple <ThemeProvider> are used,
// the parent theme will be passed as a function argument
const adjustedTheme = ancestorTheme => ({ ...ancestorTheme, color: 'blue' })
class Container extends React.Component {
render() {
return (
<ThemeProvider theme={theme}>
<ThemeProvider theme={adjustedTheme}>
<Text>Boom shaka laka!</Text>
</ThemeProvider>
</ThemeProvider>
)
}
}
Note:
Make sure to hoist your theme out of render otherwise you may have performance problems.
A higher-order component that provides the current theme as a prop to the wrapped child and listens for changes. If the theme is updated, the child component will be re-rendered accordingly.
import PropTypes from 'prop-types'
import React from 'react'
import { withTheme } from 'emotion-theming'
class TellMeTheColor extends React.Component {
render() {
return <div>The color is {this.props.theme.color}.</div>
}
}
TellMeTheColor.propTypes = {
theme: PropTypes.shape({
color: PropTypes.string
})
}
const TellMeTheColorWithTheme = withTheme(TellMeTheColor)
A React hook that provides the current theme as its value. If the theme is updated, the child component will be re-rendered accordingly.
// @live
/** @jsx jsx */
import { jsx } from '@emotion/core'
import styled from '@emotion/styled'
import { ThemeProvider, useTheme } from 'emotion-theming'
const theme = {
colors: {
primary: 'hotpink'
}
}
function SomeText (props) {
const theme = useTheme()
return (
<div
css={{ color: theme.colors.primary }}
{...props}
/>
)
}
render(
<ThemeProvider theme={theme}>
<SomeText>some text</SomeText>
</ThemeProvider>
)
Thanks goes to the styled-components team and their contributors who designed this API.
MIT 2017-present
FAQs
A CSS-in-JS theming solution, inspired by styled-components
The npm package emotion-theming receives a total of 780,731 weekly downloads. As such, emotion-theming popularity was classified as popular.
We found that emotion-theming demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.